@extends('layouts.system')

@section('css')
    <style type="text/css">
        .btnDiv
        {
            margin: 30px 0;
        }

        .btnDiv button
        {
            width: 90px;
            border-radius: 5px;
        }

        .tableDiv
        {
            padding: 20px 20px 50px 20px;
            background-color: #d7d7d7;
        }


        .tableDiv table tr
        {
            background-color: #fff;
        }

        .tableDiv .des
        {
            text-align: right;
        }

        .nav-tabs > li {
            font-size: 14px;
            margin-right: 0;
            border: 1px solid #666;
        }

        .nav-tabs li a, .nav-tabs li a:hover, .nav-tabs li a:focus {
            color: #000;
            text-decoration: none;
        }

        .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
            color: #555;
            cursor: default;
            background-color: #d7d7d7;
            border: none;
            border-bottom-color: transparent;
        }
        .nav-tabs > li.active > a:after, .nav-tabs > li.active > a:hover:after, .nav-tabs > li.active > a:focus:after {
            content: "";
            display: block;
            height: 2px;
            background: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
            border-top: 2px solid #d7d7d7;
            border-radius: 0;
            -webkit-border-radius: 0;
            border-bottom: 0;
            padding-bottom: 10px;
            padding-top: 8px;
            box-shadow: 1px -3px 4px -3px rgba(0, 0, 0, 0.08);
            border-left: 1px solid #ECECEC;
            border-right: 1px solid #ECECEC;
            position: static;
        }

    </style>
@endsection

@section('content')
    <div id="cl-wrapper" class="fixed-menu">
        <div class="container-fluid" id="pcont">
            <div class="col-md-12" style="padding-right: 0;">
                <div class="block-flat">
                    <div class="header">
                        <div class="pull-left">
                            <p class="jb_underline">提现审核&#62;&#62;审核列表</p>
                        </div>
                        <div class="clearfix"></div>
                    </div>


                    <div class="content">
                        <ul class="nav nav-tabs" role="tablist" style="margin: 20px 0;">
                            <li role="presentation" class="active">
                                <a href="#wait" aria-controls="wait" role="tab" data-toggle="tab">待处理申请</a>
                            </li>
                            <li role="presentation">
                                <a href="#checked" aria-controls="checked" role="tab" data-toggle="tab">已处理申请</a>
                            </li>
                        </ul>

                        <div class="tableDiv tab-content">
                            <div role="tabpanel" class="tab-pane active" id="wait">
                                <table class="table-bordered">
                                    <thead>
                                    <tr>
                                        <th>用户ID</th>
                                        <th>用户账号</th>
                                        <th>用户名</th>
                                        <th>提现金额</th>
                                        <th>申请时间</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item , index) in todoLists">
                                        <td v-text="item.user_id"></td>
                                        <td v-text="item.account"></td>
                                        <td>
                                            <a v-bind:href=" '/admin/user/show/' + item.user_id ">
                                                <span v-text="item.name"></span>
                                            </a>
                                        </td>
                                        <td v-text="item.cash_money"></td>
                                        <td v-text="item.created_at"></td>
                                        <td v-text="states[item.extract_state]"></td>
                                        <td>
                                            <a v-bind:href="'/admin/task/checkCashApply/' + item.id ">审核</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div role="tabpanel" class="tab-pane" id="checked">
                                <table class="table-bordered">
                                    <thead>
                                    <tr>
                                        <th>用户ID</th>
                                        <th>用户账号</th>
                                        <th>用户名</th>
                                        <th>提现金额</th>
                                        <th>申请时间</th>
                                        <th>状态</th>
                                        <th>处理人</th>
                                        <th>处理时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item , index) in doneLists">
                                        <td v-text="item.user_id"></td>
                                        <td v-text="item.account"></td>
                                        <td>
                                            <a v-bind:href=" '/admin/user/show/' + item.user_id ">
                                                <span v-text="item.name"></span>
                                            </a>
                                        </td>
                                        <td v-text="item.cash_money"></td>
                                        <td v-text="item.created_at"></td>
                                        <td v-text="states[item.extract_state]"></td>
                                        <td v-text="item.handle_user"></td>
                                        <td v-text="item.handle_time"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">

      Vue.use(VueResource)
      var vm = new Vue({
        el: '#pcont',
        data: {
          current:1,
          total:0,
          type:'',
          keyword:'',
          states: {},
          todoLists: {},
          doneLists: {}
        },
        created: function () {
          getLists(this,['1'],'todoLists');
          getLists(this,['2','3'],'doneLists');
        },
        methods : {
          changePage: function (current) {
            this._data.current = current
            getLists(this);
          },
          search: function () {
            this._data.current = 1;
            getLists(this);
          },
          changeType: function () {
            this._data.keyword = ''
          }
        }
      })

      function getLists(_vm,state,lists) {
        var params = {
          current: _vm._data.current,
          state: state
        }
        var conditions = {
          type :  _vm._data.type,
          keyword :  _vm._data.keyword
        }
        params = $.extend(params, conditions)
        _vm.$http.get('/admin/task/getCashLists',{params: params})
          .then(function (response) {
            var json = response.body;
            if (json.state == 1) {
              if(lists == 'todoLists') {
                _vm._data.todoLists = json.data.lists;
              }
              if(lists == 'doneLists') {
                _vm._data.doneLists = json.data.lists;
              }
              _vm._data.states = json.data.states;
            }
          })
          .catch(function (response) {
            console.log(response)
          })
      }

    </script>
@endsection